function upload(title,content){
      var xhr=new XMLHttpRequest()
      // 由于我们要把声音放在请求体中发送，所以必须使用 post 方法
      xhr.open('post',`/studio/track/record.json?title=${title}`)
      xhr.onload=function(){
         console.log(this.status)
         console.log(this.responseText)
      }
      xhr.send(content)
}
window.onload=function(){
    if(!navigator.mediaDevices.getUserMedia){
       alert('浏览器不支持媒体访问，请更新浏览器')
       return
    }
    var constraints={
       audio:true
    }
    //stream的类型就是MediaStream（媒体流）
    //里面有从麦克风采集到的声音
    var promise=navigator.mediaDevices.getUserMedia(constraints)
    function onSuccess(stream){
       alert('用户授权成功')
       var mediaRecorder=new MediaRecorder(stream)
       //当开始录制时，这个方法被调用
       mediaRecorder.onstart=function(){
          console.log('开始录制')
       }

       //放置录制的音频
       var data=[]

       //当数据可用时,调用此方法
       mediaRecorder.ondataavailable=function(evt){
          console.log('数据可用')
          console.log(evt)
          // evt.data 是一个 Blob 类型的，表示录制下来的声音片段的对象
          data.push(evt.data)
       }

       mediaRecorder.onstop=function(){
          console.log('停止录制')
          console.log(data)
          //将一组数据组成一个统一的数据
          var title=document.querySelector('#title').value.trim()
          var type="audio/ogg; codecs=opus"
          var blob=new Blob(data,{
               type:type
          })
          //将数据生成一个方便播放的URL
          var url=URL.createObjectURL(blob)
          console.log(url)
          //找到audio元素，修改src属性，让页面上的音频播放器可以播放我们录制下来的声音
          var oAudio=document.querySelector('audio')
          oAudio.src=url
          upload(title,blob)
       }

       //停止录制
       document.querySelector('#stop').onclick=function(){
          mediaRecorder.stop()
       }

       //开始录制，每1秒生成一次数据
       document.querySelector('#start').onclick=function(){
          mediaRecorder.start(1000)
       }
    }
    function onError(error){
       alert('授权过程中出错了：'+error)
    }
    promise.then(onSuccess).catch(onError)
}